<template>
  <Modal v-model="buildingAddFlag" :title="modalTitle" width="950" :mask-closable="false"
    @on-cancel="cancelStep">
    <div v-show="model.step == 1">
      <div class="proType">
        <span><em></em> 产品类型：</span>
        <Select v-model="model.proType" placeholder="请选择产品类型" :disabled='proTypeDisabled'
          @on-change="proTypeChange">
          <Option :value="item.dictValue" v-for="item in productTypeToBuilding" :key="item.id">
            {{ item.dictLabelCn }}</Option>
        </Select>
      </div>
      <div class="proType1" v-if="model.proType == 1">
        <div class="proType1Tips">
          <span>
            <Icon type="ios-alert" size="30" color="#5cadff" />
          </span>
          <span>
            说明：请请填单元名称、单元所含楼层数及每个楼层的房间数<br />
            举例：输入“1单元”、“10”、“3”，表示单元名称为：1单元，楼层数为10层，每层包含3个房间
          </span>
        </div>
        <div class="buildingTabAll">
          <div class="tabTit">
            <span>序号</span>
            <span><em>*</em> 单元名称</span>
            <span><em>*</em> 单元楼层数</span>
            <span><em>*</em> 每楼层房间数</span>
            <span> <em></em></span>
          </div>
          <div class="tabCon">
            <div class="tabFor" v-for="(item, index) in unitList" :key="index">
              <span>{{ index + 1 }}</span>
              <span><Input v-model="item.unitName" maxlength="10" placeholder="请填单元名称"
                  @on-blur="checkUnitName(unitList)"></Input></span>
              <span><Input v-model="item.floorNum" type="number" :min="1" placeholder="请填单元层数"
                  @on-keyup="checkFloor(item.floorNum, 'floor',index)"></Input></span>
              <span><Input v-model="item.roomCount" type="number" placeholder="每楼层房间数"
                  @on-keyup="checkFloor(item.roomCount, 'room',index)"></Input></span>
              <span>
                <em @click="delUnit(unitList, index)" v-if="index != 0">
                  删除
                </em></span>
            </div>
          </div>
          <div class="tipAdd">
            <span @click="addUnit(unitList, 'pro1')">
              <Icon size="20" class="IconAdd" color="#2d8cf0" type="md-add-circle" />增加一个单元
            </span>
          </div>
        </div>
      </div>
      <div class="proType2" v-if="model.proType == 2">
        <Form ref="parkingLotFormValidate" :model="parkingLotFormValidate"
          :rules="parkingLotRuleValidate" :label-width="150">
          <FormItem label="楼层数：" prop="floorNumber">
            <Input v-model="parkingLotFormValidate.floorNumber" placeholder="请输入楼层数"
              type="number" style="width: 300px"
              @on-keyup="checkFloor(parkingLotFormValidate.floorNumber, 'floorNumber')"></Input>
            <span class="eg">说明：请填写储藏室、地下室、车库或车位所包含的楼层数；</span>
            <span class="eg">举例：以车位为例，如输入“2”，表示“车位”共有2层</span>
          </FormItem>
          <FormItem label="每层分区数：" prop="partitionNumber">
            <Input v-model="parkingLotFormValidate.partitionNumber" placeholder="请输入每层分区数"
              type="number" style="width: 300px"
              @on-keyup="checkFloor(parkingLotFormValidate.partitionNumber, 'partitionNumber')"></Input>
            <span class="eg"> 说明：请填写每个楼层所包含的分区数量；</span>
            <span class="eg">举例：如输入“5”，表示该楼层共有5个分区</span>
          </FormItem>
          <FormItem label="每分区物业数：" prop="propertyNumber">
            <Input v-model="parkingLotFormValidate.propertyNumber" placeholder="请输入物业数"
              type="number" style="width: 300px"
              @on-keyup="checkFloor(parkingLotFormValidate.propertyNumber,'propertyNumber')"></Input>
            <span class="eg">说明：请填写每个分区所包含的储藏室、地下室、车库或车位数量；</span>
            <span class="eg">
              举例：以车位为例，如输入“30”，表示每个分区包含30个车位</span>
          </FormItem>
        </Form>
      </div>
      <div class="proType1 proType3" v-if="model.proType == 3">
        <div class="proType1Tips">
          <span>
            <Icon type="ios-alert" size="30" color="#5cadff" />
          </span>
          <span>
            说明：请填写单元名称及每个单元所包含的户数<br />
            举例：输入“1单元”、“3”，表示单元名称为：1单元，该单元共包含3户
          </span>
        </div>
        <div class="buildingTabAll">
          <div class="tabTit">
            <span>序号</span>
            <span><em>*</em> 单元名称</span>
            <span><em>*</em> 单元楼户数</span>
            <span><em></em> </span>
          </div>
          <div class="tabCon">
            <div class="tabFor" v-for="(item, index) in unitListPro3" :key="index">
              <span>{{ index + 1 }}</span>
              <span><Input v-model="item.unitName" maxlength="10" placeholder="请填单元名称"
                  @on-blur="checkUnitName(unitListPro3)"></Input></span>
              <span><Input v-model="item.householdsNum" type="number" placeholder="请填单元楼户数"
                  @on-keyup="checkFloor(item.householdsNum, 'householdsNum',index)"></Input></span>
              <span>
                <em @click="delUnit(unitListPro3, index)" v-if="index != 0">
                  删除
                </em></span>
            </div>
          </div>
          <div class="tipAdd">
            <span @click="addUnit(unitListPro3, 'pro3')">
              <Icon size="20" class="IconAdd" color="#2d8cf0" type="md-add-circle" />增加一个单元
            </span>
          </div>
        </div>
      </div>
    </div>
    <div v-if="model.step == 2">
      <div class="step2ProType1" v-if="model.proType == 1">
        <div class="unitBoxFather" :style="{ width: unitWith + 'px' }">
          <div class="unitBox" v-for="(item, index) in unitListAll" :key="index">
            <div class="unitBoxTit">
              <Input v-model="item.unitName" placeholder="单元"></Input>
            </div>
            <div class="buildingTabAll">
              <div class="tabTit">
                <span>楼层</span>
                <span>楼层房间数</span>
              </div>
              <div class="tabCon">
                <div class="tabFor" v-for="(childItem, childindex) in item.floorDTOS"
                  :key="childindex">
                  <span>{{ childItem.floorName }}</span>
                  <span><Input v-model="childItem.roomCount" type="number"
                      @on-keyup="checkFloor(childItem.roomCount, 'roomAll',childindex)"
                      placeholder="楼层房间数"></Input></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="step2ProType1 step2ProType2" v-if="model.proType == 2">
        <div class="unitBoxFather">
          <div class="unitBox" v-for="(item, index) in unitListAll" :key="index">
            <div class="unitBoxTit">
              <Input v-model="item.unitName" placeholder="层数"></Input>
            </div>
            <div class="buildingTabAll">
              <div class="tabTit">
                <span>分区名称</span>
                <span>分区物业</span>
              </div>
              <div class="tabCon">
                <div class="tabFor" v-for="(childItem, childindex) in item.floorDTOS"
                  :key="childindex">
                  <span><Input v-model="childItem.floorName" placeholder="分区名称"></Input></span>
                  <span><Input v-model="childItem.roomCount" placeholder="分区物业"
                      @on-keyup="checkFloor(childItem.roomCount,'roomCountAll',childindex)"></Input></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="step2ProType3" v-if="model.proType == 3">
        <div class="unitBoxFather">
          <div class="unitBox" v-for="(item, index) in unitListPro3" :key="index">
            <div class="boxBottom">
              <Input v-model="item.unitName" placeholder="单元"></Input>
            </div>
            <span class="boxText">每单元户数</span>
            <Input v-model="item.householdsNum" placeholder="每单元户数" type="number"
              @on-keyup="checkFloor(item.householdsNum,'householdsNum',index)"></Input>
          </div>
        </div>
      </div>
    </div>
    <div v-if="model.step == 3">
      <div class="step3Box">
        <div class="step3Text">
          第一步<br />
          请按照数据模板的格式准备导入房源信息数据
          <div class="stepDownload" @click="reImportTemplate">
            <Icon type="md-download" />下载房源信息数据模板
          </div>
        </div>
        <div class="step3Text">第二步 <br />请填写好房源信息相关内容</div>
        <div class="step3Text">
          第三步<br />
          请上传已填写的“房源信息数据模板”
          <div>
            <Upload :action="upload.reqUrl" :format="['xlsx', 'xls', 'XLS', 'XLSX']"
              ref="upload" :headers="upload.headers" :on-format-error="handleFormatError"
              :data="dataParams" :before-upload="handleBefore" :on-success="handleSuccess"
              :show-upload-list="false">
              <Button icon="ios-cloud-upload-outline">上传文件</Button>
            </Upload>

          </div>
          <span style="display: inline-block; margin-top: 10px">{{
            step3File.name
          }}</span>
        </div>
      </div>
    </div>

    <div slot="footer">
      <Button @click="cancelStep" data-test="btn_cancel">取消</Button>
      <Button v-show="model.step > 1 && model.step != 3" type="primary" @click="preStep"
        data-test="btn_pre">上一步</Button>
      <Button v-show="model.step != 2 && model.step != 3" type="primary" @click="nextStep"
        data-test="btn_next">下一步</Button>
      <Button v-show="model.step == 2" type="primary" @click="saveStep"
        data-test="btn_save">导入房源信息</Button>
      <Button v-show="model.step == 3" type="primary" @click="saveStep3"
        data-test="btn_save">导入房源</Button>
    </div>
  </Modal>
  <!-- 新建房源模态框end -->
</template>
<script>
  import roomMgr from '@/biz/building/room.js'
  export default {
    name: 'buildingAdd',
    props: ['buildingId'],
    data() {
      return {

        step3File: '', //上传文件的
        upload: roomMgr.uploadTemplate(),
        dataParams: {
          buildingId: this.buildingId,
        },


        buildingAddFlag: false,
        model: {
          step: 1, // 步骤
          proType: '1', // 产品类型
          loading: false, // todo "TypeError: this.$parent.updateGutter is not a function"
          housetypeList: [], //户型列表
        },
        modalTitle: '新建房源：设置产品类型及信息',

        productTypeToBuilding: JSON.parse(this.$tool.getStorage('dictionaryData'))
          .productTypeToBuilding,

        unitListPro3: [
        {
          unitName: '', //单元名称
          householdsNum: '', //单元户数
        }],

        unitList: [
        {
          unitName: '',
          floorNum: '',
          roomCount: '',
        }, ],

        unitListAll: [],
        unitWith: '', //第二步单元宽度

        // 表单验证
        parkingLotRuleValidate: {
          floorNumber: [
          {
            required: true,
            message: '楼层数不能为空。',
            trigger: 'blur',
          }, ],
          partitionNumber: [
          {
            required: true,
            message: '每层分区数不能为空。',
            trigger: 'blur',
          }, ],
          propertyNumber: [
          {
            required: true,
            message: '每分区物业数不能为空。',
            trigger: 'blur',
          }, ],
        },

        parkingLotFormValidate: {
          floorNumber: '',
          partitionNumber: '',
          propertyNumber: '',
        },
        parkingLotList: [],
        proTypeDisabled: false,
        unitNameArr: null,
        unitCreat: null
      }
    },

    methods: {
      show(val, unitNameArr) {
        console.log(unitNameArr, 'unitNameArrunitNameArrunitNameArr');
        this.unitCreat = val
        if (val == 'unitCreat') {
          this.unitNameArr = unitNameArr

          this.model.proType = this.$route.query.productType //产品类型
          this.proTypeDisabled = true
          this.buildingAddFlag = true
        } else {
          this.buildingAddFlag = true
        }

      },
      // 导入格式判断
      handleFormatError(file) {
        this.$Message.error('只支持上传Excel表格！')
      },

      // 导入前
      handleBefore(file) {
        this.step3File = file
        return false
      },


      handleSuccess(res, file) {
        if (res.code == 500) {
          this.$Message.error(res.msg)
        } else {
          this.$Message.success('数据导入成功！')
          this.buildingAddFlag = false
          this.step3File = ''

          this.$emit('updataData')
          this.resetData()
          this.model = {
            step: 1, // 步骤
            proType: '1', // 产品类型
            loading: false, // todo "TypeError: this.$parent.updateGutter is not a function"
            housetypeList: [], //户型列表
          }
        }
      },

      reImportTemplate() {
        roomMgr.downloadTemplate({
          buildingId: this.buildingId,
          fileName: '房源信息数据模板.xls'
        })
      },

      // 切换产品类型
      proTypeChange() {
        this.resetData() //重置数据
      },
      checkFloor(elValue, val, index) {
        if (val == 'roomAll') {
          elValue = ''

        }
        console.log(index, this.unitListAll, elValue, 'ioiiiiiiiiiii');

        // console.log(this.unitList[index], (/(^[1-9]\d*$)/.test(elValue), 'ssssssssssssssssss');
        // console.log(val, elValue, this.unitList[index].floorNum,
        //   'elValueelValueelValueelValue');
        if (val == 'floor') {
          if (elValue > 100 || !(/(^[1-9]\d*$)/.test(elValue))) {
            this.unitList[index].floorNum = ''
            this.$Message.warning('层数设置为正整数且不可超过100。')
            return false
          }
        }
        if (val == 'room') {
          if (elValue > 100 || !(/(^[1-9]\d*$)/.test(elValue))) {
            this.unitList[index].roomCount = ''
            this.$Message.warning('房间数设置为正整数且不可超过100。')
            return false
          }
        }
        if (val == 'floorNumber') {
          if (!(/(^[1-9]\d*$)/.test(elValue))) {
            this.parkingLotFormValidate.floorNumber = ''
            this.$Message.warning('设置为正整数。')
            return false
          }
        }
        if (val == 'partitionNumber') {
          if (elValue > 26 || !(/(^[1-9]\d*$)/.test(elValue))) {
            this.parkingLotFormValidate.partitionNumber = ''
            this.$Message.warning('设置为正整数且最大可支持26个分区。')
            return false
          }
        }

        if (val == 'propertyNumber') {
          if (!(/(^[1-9]\d*$)/.test(elValue))) {
            this.parkingLotFormValidate.propertyNumber = ''
            this.$Message.warning('设置为正整数。')
            return false
          }
        }


        if (val == 'householdsNum') {
          console.log(index, elValue, !(/(^[1-9]\d*$)/.test(elValue)), 'index');
          if (elValue > 50 || !(/(^[1-9]\d*$)/.test(elValue))) {
            this.unitListPro3[index].householdsNum = ''
            this.$Message.warning('设置为正整数且最大可支持50户。')
            return false
          }

        }
      },
      delUnit(proVal, index) {
        proVal.splice(index, 1)
      },

      //校验单元名称是否重复
      checkUnitName(proVal) {
        const arr = proVal.map((item) => {
          return item.unitName
        })

        if (this.unitNameArr && arr && this.$tool.isRepeat([...arr, ...this.unitNameArr])) {
          this.$Message.warning('单元名不能重复。')
          return false
        }
        if (arr.length > 1 && this.$tool.isRepeat(arr)) {
          this.$Message.warning('单元名不能重复。')
          return false
        } else {
          return true
        }
      },
      ifEmpty(proVal, pro) {
        if (!this.checkUnitName(proVal)) {
          return
        } else {
          const bool = proVal.some((item) => {
            return Object.values(item).some((val) => !val)
          })
          if (!bool) {
            return true
          } else {
            this.$Message.warning('请完成单元必填项。')
            return false
          }
        }
      },
      // 增加一个单元
      addUnit(proVal, pro) {
        if (this.ifEmpty(proVal, pro)) {
          if (pro == 'pro1') {
            proVal.push({
              unitName: '',
              floorNum: '',
              roomCount: '',
            })
            return true
          } else if (pro == 'pro3') {
            proVal.push({
              unitName: '', //单元名称
              householdsNum: '', //单元户数
            })
            return true
          }
        }
      },

      addUnitPro2() {},
      transforTitle() {
        if (this.model.step == 1) {
          this.modalTitle = '新建房源：设置产品类型及信息'
        } else if (this.model.step == 2) {
          this.modalTitle = '新建房源：设置楼层信息'
        } else {
          this.modalTitle = '导入房源信息'
        }
      },
      nextStep() {
        if (this.model.step == 1 && this.model.proType == 1) {
          if (!this.ifEmpty(this.unitList)) {
            return false
          }
          this.unitList.forEach((item) => {
            let arrFloor = []
            for (let index = 0; index < item.floorNum; index++) {
              arrFloor.push({
                floorName: index + 1,
                roomCount: item.roomCount,
              })
            }

            this.unitListAll.push({
              unitName: item.unitName,
              floorDTOS: arrFloor,
            })
          })
          this.unitWith = this.unitListAll.length * 300 + 200
          this.model.step++
        } else if (this.model.step == 1 && this.model.proType == 2) {
          this.$refs.parkingLotFormValidate.validate((valid) => {
            if (valid) {
              for (
                let index = 0; index < this.parkingLotFormValidate.floorNumber; index++
              ) {
                let arrFloor = []
                for (
                  let ind = 0; ind < this.parkingLotFormValidate.partitionNumber; ind++
                ) {
                  arrFloor.push({
                    floorName: `分区${ind + 1}`,
                    roomCount: this.parkingLotFormValidate.propertyNumber,
                  })
                }
                console.log(this.unitNameArr, '11111this.unitNameListArr');
                this.unitListAll.push({
                  unitName: `第${this.unitNameArr?(this.unitNameArr.length+index+1):(index + 1)}层`,
                  floorDTOS: arrFloor,
                })
              }
              this.model.step++
            }
          })
        } else if (this.model.step == 1 && this.model.proType == 3) {
          if (!this.ifEmpty(this.unitListPro3)) {
            return false
          }

          this.unitListPro3.forEach((item) => {
            this.unitListAll.push({
              unitName: item.unitName,
              floorDTOS: [
              {
                floorName: '',
                roomCount: item.householdsNum,
              }, ],
            })
          })
          this.model.step++
        }

        this.transforTitle()
      },
      preStep() {
        if (this.model.step == 3) {
          this.step3File = ''
        }
        this.model.step--
        this.transforTitle()
        if (this.model.step == 1) {
          this.unitListAll = []
          this.parkingLotList = []
        }
      },
      saveStep() {
        console.log(this.unitListAll, this.model.step, 'this.unitListAll');
        if (this.model.step == 2) {
          let params = {
            buildingId: this.buildingId,
            productType: this.model.proType,
            unitDTOS: this.unitListAll,
          }
          if (this.unitCreat == 'unitCreat') {
            params.instantlyCreateRoom = true
          }
          roomMgr
            .saveUnitFloor(params)
            .then((res) => {
              this.model.step++
            })
            .catch((res) => this.$Message.error(res))
        }
      },
      saveStep3() {
        if (this.model.step == 3) {
          if (this.step3File) {
            this.dataParams.buildingId = this.buildingId
            this.$refs.upload.post(this.step3File)
            this.step3File = ''
          } else {
            this.$Message.warning('请上传已填写的“房源信息数据模板”')
          }
        }
      },
      cancelStep() {
        this.model.step = 1
        this.buildingAddFlag = false

        this.$emit('updataData')
        this.resetData()
      },
      resetData() {
        this.unitList = [
        {
          unitName: '',
          floorNum: '',
          roomCount: '',
        }, ]
        this.unitListAll = []
        this.unitListPro3 = [
        {
          unitName: '', //单元名称
          householdsNum: '', //单元户数
        }, ]
        // this.$refs.parkingLotFormValidate.resetFields();
        this.parkingLotFormValidate = {
          floorNumber: '',
          partitionNumber: '',
          propertyNumber: '',
        }
        this.step3File = ''
      },
    },

    created() {
      this.unitWith = this.unitListAll.length * 300 + 200
    },
    beforeMount() {},
  }
</script>
<style lang='scss' scoped>
  .proType {
    display: flex;
    flex-direction: row;

    span {
      width: 180px;
      text-align: right;
      vertical-align: middle;
      float: left;
      font-size: 14px;
      color: #515a6e;
      line-height: 1;
      padding: 10px 12px 10px 0;
      box-sizing: border-box;

      em::before {
        content: '*';
        display: inline-block;
        margin-right: 4px;
        line-height: 1;
        font-family: SimSun;
        font-size: 14px;
        color: #ed4014;
      }
    }
  }

  .proType1 {
    .proType1Tips {
      display: flex;
      flex-direction: row;
      background: rgba(254, 252, 236, 1);
      margin-top: 10px;
      padding: 10px;

      span {
        margin-left: 20px;
      }
    }

    .buildingTabAll {
      margin-top: 10px;

      .tabTit {
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        span {
          width: 20%;
          padding: 5px;
          line-height: 32px;

          em {
            color: red;
          }
        }

        span:first-child {
          text-align: center;
        }
      }

      .tabCon {
        max-height: 400px;
        overflow: auto;

        .tabFor {
          display: flex;
          flex-direction: row;
          justify-content: space-between;

          span {
            width: 33.33%;
            padding: 5px;
            line-height: 32px;

            em {
              font-style: normal;
            }
          }

          span:first-child {
            text-align: center;
          }

          span:last-child {
            text-align: center;
            color: #2d8cf0;
            cursor: pointer;
          }
        }
      }

      .tip {
        font-size: 14px;
        color: #c5c8ce;
        margin: 10px 0 10px 50px;
      }

      .tipAdd {
        margin: 10px 0 10px 50px;
        color: #2d8cf0;

        span {
          cursor: pointer;
        }
      }
    }
  }

  .proType2 {
    margin-top: 24px;

    span.eg {
      display: block;
      line-height: 1.2;
      color: #999;
      margin-top: 5px;
    }
  }

  .proType3 {
    .buildingTabAll {
      .tabTit {
        span {
          width: 25%;
          padding: 5px;
          line-height: 32px;

          em {
            color: red;
          }
        }

        span:first-child {
          text-align: center;
        }
      }

      .tabCon {
        max-height: 400px;
        overflow: auto;

        .tabFor {
          display: flex;
          flex-direction: row;
          justify-content: space-between;

          span {
            width: 25%;
            padding: 5px;
            line-height: 32px;
          }

          span:first-child {
            text-align: center;
          }

          span:last-child {
            text-align: center;
            color: #2d8cf0;
            cursor: pointer;
          }
        }
      }
    }
  }

  .step2ProType1 {
    // display: flex;
    // flex-direction: row;
    padding: 20px 0;
    width: 100%;
    overflow-x: auto;
    // .unitBoxFather{
    //   width:
    // }

    .unitBox {
      width: 200px;
      border: 1px #dcdee2 solid;
      padding: 10px;
      margin: 0 10px;
      float: left;

      .unitBoxTit {
        border-bottom: 1px #dcdee2 solid;
        padding-bottom: 10px;
        text-align: center;
      }

      .buildingTabAll {
        margin-top: 10px;

        .tabTit {
          display: flex;
          flex-direction: row;
          justify-content: space-between;

          span:first-child {
            width: 40%;
            padding: 5px;
            text-align: center;
          }

          span:last-child {
            width: 60%;
            padding: 5px;
          }
        }

        .tabCon {
          max-height: 400px;
          overflow: auto;

          .tabFor {
            display: flex;
            flex-direction: row;
            justify-content: space-between;

            span:first-child {
              width: 40%;
              padding: 5px;
              text-align: center;
            }

            span:last-child {
              width: 60%;
              padding: 5px;
            }
          }
        }

        .tip {
          font-size: 14px;
          color: #c5c8ce;
          margin: 10px 0 10px 50px;
        }

        .tipAdd {
          margin: 10px 0 10px 50px;
          color: #2d8cf0;
          cursor: pointer;
        }
      }
    }
  }

  .step2ProType2 {
    .unitBoxFather {
      display: flex;
      flex-direction: row;
      width: 100%;
      flex-wrap: wrap; //1父元素设置换行
      box-sizing: border-box;
      max-height: 500px;
      overflow-y: auto;
    }

    .unitBox {
      margin-top: 20px;
      box-sizing: border-box;
      width: calc(calc(100% / 4) - 20px); //1子元素使用css calc函数，每行展示两个盒子
    }
  }

  .step2ProType3 {
    .unitBoxFather {
      display: flex;
      flex-direction: row;
      width: 100%;
      flex-wrap: wrap; //1父元素设置换行
      box-sizing: border-box;
      max-height: 500px;
      overflow-y: auto;
    }

    .unitBox {
      text-align: center;
      width: 200px;
      border: 1px #dcdee2 solid;
      padding: 10px;
      margin: 20px 10px 0;
      box-sizing: border-box;
      width: calc(calc(100% / 4) - 20px); //1子元素使用css calc函数，每行展示两个盒子

      .boxBottom {
        border-bottom: 1px #dcdee2 solid;
        padding-bottom: 20px;
      }

      .boxText {
        margin: 10px 0;
        display: block;
      }
    }
  }

  .step3Box {
    padding: 0 50px 20px;

    .step3Text {
      margin-top: 30px;
      line-height: 1.5;

      >div {
        margin-top: 10px;
      }

      .stepDownload {
        cursor: pointer;
        color: #2d8cf0;
        display: block;
        margin: 10px 0;
      }
    }
  }
</style>